<template>
    <view class="address-container">
		<view class="back-to-home" @click="navigateToIndex">
		  <uni-icons type="back" size="24"></uni-icons> 返回首页
		</view>
		
		    <view class="add-button" @click="addNewAddress">
		        新增
		    </view>
        <!-- <view class="address-item" v-for="address in addressList" :key="address.addressid"> -->
		<view class="address-item" v-for="(address, index) in addressList" :key="index" @click="selectAddress(address)">
            <view class="address-text">
                <text class="address-province">{{ address.province }}{{ address.city }}{{ address.town }}</text>
                <text class="address-detail">{{ address.address }}</text>
                <text class="address-name-phone">{{ address.name }} {{ address.phone }} </text>
				   <text v-if="address.isDefault === 1" style="color: red;">默认</text>
            </view>
            <view class="address-icons">
                 <uni-icons type="gear-filled" size="30" @click="editAddress(address.addressid)"></uni-icons>        
			</view>
			
        </view>
			    
    </view>

</template>

<script>
    import config from '@/config'; // 根据实际情况引入 config

    export default {
        data() {
            return {
                addressList: []  // 存储从后端获取的地址数据
            };
        },
		
        mounted() {
            this.fetchAddressData();
        },
        methods: {
            fetchAddressData() {
                // 使用 uni.request 获取后端数据
                uni.request({
                    url: config.apiUrl + '/address/getaddress',
                    method: 'GET',
                    success: (response) => {
                        this.addressList = response.data; // 将后端返回的地址数据存储到 addressList 中
						
                    },
                    fail: (error) => {
                        console.error('Error fetching address data:', error);
                    }
                });
            },
			addNewAddress(){
				uni.reLaunch({
					url:'/pages/mine/address/addaddress'
				});
			},
			editAddress(addressid){
				console.log(addressid);
				uni.reLaunch({
					url:'/pages/mine/address/editaddress?addressid='+addressid
				})
			},
			navigateToIndex(){
			    uni.reLaunch({
			    	url:'/pages/mine/index'
			    });
			},
			selectAddress(address) {
			      // 选择地址并存储在本地存储
			      uni.setStorage({
			        key: 'selectedAddress',
			        data: address
			      });
				  console.log('地址已存储：', address);
			      // 返回到 confirm-order 页面
			      uni.navigateBack();
			    }
        },
			
		
    }
</script>

<style scoped>
    .address-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 10px;
        background-color: #ffefba;
        border-bottom: 1px solid #ccc;
        height: 550px;
    }

    .address-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* 内容顶部对齐 */
        margin-top: 20px;
        background-color: aliceblue;
        border-radius: 18px;
        padding: 10px;
        font-size: 12px;
    }

    .address-text {
        display: flex;
        flex-direction: column; /* 设置子元素垂直排列 */
        justify-content: flex-start; /* 内容顶部对齐 */
    }

    .address-icons {
        display: flex;
        flex-direction: row; /* 默认是水平布局 */
    }

    .address-province {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .address-detail {
        margin-bottom: 5px;
    }

    .address-name-phone {
        margin-bottom: 10px;
    }

    .add-button {
        margin-left: auto; /* 将新增按钮推到最右侧 */
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        cursor: pointer; /* 添加指针样式 */
        background-color: #007bff;
        color: white;
    }

    .back-to-home {
        margin-bottom: 10px;
    }

    .back-to-home uni-icons {
        margin-right: 5px;
    }
</style>